<template>
  <view class="page">
    <view class="scroll-container">
      <view v-if="isLoaded && itemList.length > 0" class="list-container">
        <view v-for="(col, c) in columnNum" :key="c" class="column">
          <view v-for="(item, i) in columnList[c]" :key="i" class="item-box">
            <u--image
              :src="item.url"
              :width="345"
              :height="item.displayHeight || 300"
              mode="widthFix"
            >
              <template v-slot:loading>
                <u-loading-icon color="red"></u-loading-icon>
              </template>
            </u--image>
            <view class="item-info">
              <view class="info-name">
                图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片
              </view>
              <view class="info-other">
                <image
                  src="@/static/images/header.png"
                  mode=""
                  class="info-header"
                />
                <text class="info-user"
                  >用户用户用户用户用户用户用户用户用户用户用户用户用户用户</text
                >
                <image
                  src="@/static/images/like.png"
                  mode=""
                  class="info-like"
                />
                <text class="info-num">12</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore v-if="isLoadMore" status="loading" />
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      columnNum: 2, // 2列
      itemList: [], // 原始数据
      columnList: [], // 分列数据
      isLoaded: false, // 控制是否显示图片
      isLoadMore: false,
    };
  },
  computed: {},
  onLoad() {
    this.generateRandomImages(true);
  },
  // 执行下拉刷新操作
  onPullDownRefresh() {
    this.generateRandomImages(true);
  },
  // 上拉加载更多
  onReachBottom() {
    this.isLoadMore = true;
    this.generateRandomImages();
  },
  methods: {
    // 生成随机图片路径
    generateRandomImages(init = false) {
      if (init) {
        this.itemList = [];
      }
      const arr = Array.from({ length: 10 }, (_, i) => {
        let height;
        if (i === 0) {
          // 第一张图片固定高度
          height = 175;
        } else if (i === 1) {
          // 第二张图片固定高度
          height = 325;
        } else {
          // 其余随机
          height = this.getRandomHundred();
        }
        return {
          id: i + 1,
          url: `https://picsum.photos/150/${height}?random=${Math.random()}`,
          title: `图片 ${i + 1}`,
        };
      });
      this.itemList = this.itemList.concat(arr);
      this.distributeImagesByRealHeight();
    },
    // 生成整百的数
    getRandomHundred() {
      const min = 175;
      const max = 325;
      const step = 25;

      // 生成 0 到 ((max - min) / step) 之间的随机整数
      const randomMultiplier = Math.floor(
        Math.random() * ((max - min) / step + 1)
      );
      return min + randomMultiplier * step;
    },

    async distributeImagesByRealHeight() {
      const columnHeights = Array(this.columnNum).fill(0);
      const columns = Array.from({ length: this.columnNum }, () => []);

      const promises = this.itemList.map((item) => {
        return new Promise((resolve) => {
          uni.getImageInfo({
            src: item.url,
            success: (res) => {
              const width = res.width;
              const height = res.height;
              const displayWidth = 345; // image-box 的宽度 (rpx 可换算为 px)
              const ratio = displayWidth / width;
              const displayHeight = height * ratio;

              // 分配到最矮的一列
              const minIndex = columnHeights.indexOf(
                Math.min(...columnHeights)
              );
              columns[minIndex].push({
                ...item,
                displayHeight,
              });
              columnHeights[minIndex] += displayHeight;

              resolve();
            },
            fail: () => {
              resolve();
            },
          });
        });
      });

      await Promise.all(promises);
      this.columnList = columns;
      // 停止下拉刷新
      uni.stopPullDownRefresh();
      this.isLoaded = true; // 加载完成后再显示
      this.isLoadMore = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  box-sizing: border-box;
  height: 100vh;
  padding-bottom: 0;
  .scroll-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
}
.list-container {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  height: 100%;
  .column {
    width: 345rpx;
  }
  .item-box {
    box-sizing: border-box;
    border-radius: 8rpx;
    width: 100%;
    margin-bottom: 20rpx;
    overflow: hidden;
    .item-image {
      width: 100%;
      height: auto;
    }
    .item-info {
      .info-name {
        font-size: 28rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical; /* 垂直排列 */
        -webkit-line-clamp: 2; /* 限制显示的行数，例如 3 行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 添加省略号 */
      }
      .info-other {
        padding: 10rpx;
        display: flex;
        align-items: center;
        overflow: hidden;
        font-size: 24rpx;
        color: #666666;
        .info-header {
          border-radius: 999rpx;
          width: 30rpx;
          height: 30rpx;
          overflow: hidden;
          flex-shrink: 0;
          margin-right: 8rpx;
        }
        .info-user {
          color: #666666;
          flex: 1 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 8rpx;
        }
        .info-like {
          width: 28rpx;
          height: 28rpx;
          overflow: hidden;
          flex-shrink: 0;
          margin-right: 8rpx;
        }
        .info-num {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
